<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>WebSocket 监控</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            max-width: 800px;
            margin: 0 auto;
            padding: 20px;
            background-color: #f5f5f5;
        }
        h1 {
            color: #333;
            text-align: center;
        }
        .container {
            background-color: white;
            border-radius: 8px;
            padding: 20px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        }
        .controls {
            margin-bottom: 20px;
            display: flex;
            gap: 10px;
        }
        button {
            padding: 8px 16px;
            background-color: #4CAF50;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
        }
        button:disabled {
            background-color: #cccccc;
        }
        button#disconnect {
            background-color: #f44336;
        }
        #status {
            margin-bottom: 20px;
            padding: 10px;
            border-radius: 4px;
        }
        .connected {
            background-color: #dff0d8;
            color: #3c763d;
        }
        .disconnected {
            background-color: #f2dede;
            color: #a94442;
        }
        #messageLog {
            height: 300px;
            overflow-y: auto;
            border: 1px solid #ddd;
            padding: 10px;
            border-radius: 4px;
            background-color: #f9f9f9;
        }
        .log-entry {
            margin-bottom: 5px;
            padding: 5px;
            border-bottom: 1px solid #eee;
        }
        .log-entry.received {
            color: #31708f;
            background-color: #d9edf7;
        }
        .log-entry.sent {
            color: #3c763d;
            background-color: #dff0d8;
        }
        .log-entry.error {
            color: #a94442;
            background-color: #f2dede;
        }
        #messageInput {
            flex-grow: 1;
            padding: 8px;
            border: 1px solid #ddd;
            border-radius: 4px;
        }
    </style>
</head>
<body>
<div class="container">
    <h1>WebSocket 监控</h1>

    <div class="controls">
        <button id="connect">连接</button>
        <button id="disconnect" disabled>断开</button>
        <input type="text" id="messageInput" placeholder="输入要发送的消息">
        <button id="send" disabled>发送</button>
    </div>

    <div id="status" class="disconnected">状态: 未连接</div>

    <h3>通信日志:</h3>
    <div id="messageLog"></div>
</div>

<script>
    const connectBtn = document.getElementById('connect');
    const disconnectBtn = document.getElementById('disconnect');
    const sendBtn = document.getElementById('send');
    const messageInput = document.getElementById('messageInput');
    const statusDiv = document.getElementById('status');
    const messageLog = document.getElementById('messageLog');

    let socket = null;

    // 根据你的实际部署情况修改WebSocket URL
    const wsUrl = 'ws://127.0.0.1:8080/websocket';

    connectBtn.addEventListener('click', connectWebSocket);
    disconnectBtn.addEventListener('click', disconnectWebSocket);
    sendBtn.addEventListener('click', sendMessage);
    messageInput.addEventListener('keypress', function(e) {
        if (e.key === 'Enter') {
            sendMessage();
        }
    });

    function connectWebSocket() {
        if (socket !== null && socket.readyState === WebSocket.OPEN) {
            addLogEntry('WebSocket 已经连接', 'error');
            return;
        }

        socket = new WebSocket(wsUrl);

        socket.onopen = function(event) {
            updateStatus(true);
            addLogEntry('WebSocket 连接已建立', 'received');
        };

        socket.onmessage = function(event) {
            addLogEntry('收到消息: ' + event.data, 'received');
        };

        socket.onclose = function(event) {
            updateStatus(false);
            if (event.wasClean) {
                addLogEntry(`连接已关闭，代码=${event.code} 原因=${event.reason}`, 'received');
            } else {
                addLogEntry('连接中断', 'error');
            }
        };

        socket.onerror = function(error) {
            updateStatus(false);
            addLogEntry('发生错误: ' + error.message, 'error');
        };
    }

    function disconnectWebSocket() {
        if (socket && socket.readyState === WebSocket.OPEN) {
            socket.close();
        }
    }

    function sendMessage() {
        if (socket && socket.readyState === WebSocket.OPEN) {
            const message = messageInput.value;
            if (message.trim() !== '') {
                socket.send(message);
                addLogEntry('发送消息: ' + message, 'sent');
                messageInput.value = '';
            }
        } else {
            addLogEntry('无法发送消息: WebSocket 未连接', 'error');
        }
    }

    function updateStatus(connected) {
        if (connected) {
            statusDiv.textContent = '状态: 已连接';
            statusDiv.className = 'status connected';
            connectBtn.disabled = true;
            disconnectBtn.disabled = false;
            sendBtn.disabled = false;
        } else {
            statusDiv.textContent = '状态: 未连接';
            statusDiv.className = 'status disconnected';
            connectBtn.disabled = false;
            disconnectBtn.disabled = true;
            sendBtn.disabled = true;
        }
    }

    function addLogEntry(message, type) {
        const now = new Date();
        const timeString = now.toLocaleTimeString();
        const logEntry = document.createElement('div');
        logEntry.className = 'log-entry ' + type;
        logEntry.textContent = `[${timeString}] ${message}`;
        messageLog.appendChild(logEntry);
        messageLog.scrollTop = messageLog.scrollHeight;
    }
</script>
</body>
</html>